<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
</head>

<style>
    /*.one{*/
    /*    background-color: tomato;*/
    /*}*/

    /*选中所有p标签*/
    /*p{*/
    /*    background-color: brown;*/
    /*}*/

    /*组合选择器*/
    /*.one,p,.two{*/
    /*    background-color: tomato;*/
    /*}*/

    /*包含选择器*/
    /*div p{*/
    /*    background-color: tomato;*/
    /*}*/

    /*子代选择器*/
    /*div > p{*/
    /*    background-color: tomato;*/
    /*}*/


    /*相邻选择器*/
    /*div + p {*/
    /*    background-color: pink;*/
    /*}*/


    /*兄弟选择器*/
    div ~ p {
        background-color: red;
    }




</style>

<body>

<div class="one">我是div元素</div>
<p>我是P元素</p>
<p>我是第二个p元素</p>
<div>我是第二个div元素</div>
<a href="" class="two">我是a</a>
<!--父子关系-->
<div>
    <p>我是div中的p</p>
</div>
<!--爷孙关系-->
<div>
    <section>
        <p>我是div中section里面所包含的p标签</p>
    </section>
</div>
<p>我是div之后的p元素</p>
<div>
    <!--父子关系-->
    <div>
        <div></div>
        <p>我是div中div里面的p元素</p>
    </div>
</div>
<a href="">我是div之后的a</a>
<p>我是a后面的p元素</p>


</body>
</html>